<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>个人空间 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4A6FFF;
      --primary-light: #E8F0FF;
      --success: #34C759;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --premium: #FFB800;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.6;
      padding-bottom: 60px;
    }
    
    /* 顶部封面 */
    .profile-cover {
      height: 160px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
    }
    
    /* 个人信息区 */
    .profile-header {
      background-color: var(--bg-white);
      padding: 0 16px 16px;
      margin-top: -60px;
    }
    
    .avatar-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--bg-white);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .profile-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .action-btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    
    .btn-follow {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-message {
      background-color: var(--bg-light);
      color: var(--text-primary);
    }
    
    .btn-more {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .profile-info {
      margin-top: 10px;
    }
    
    .username {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .user-title {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .verify-badge {
      color: var(--primary);
    }
    
    .user-bio {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 15px;
    }
    
    .user-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .user-tag {
      background-color: var(--primary-light);
      color: var(--primary);
      padding: 3px 12px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .stats-container {
      display: flex;
      border-top: 1px solid var(--border-light);
      padding-top: 15px;
    }
    
    .stat-item {
      flex: 1;
      text-align: center;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    
    .stat-label {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    /* 内容导航 */
    .content-tabs {
      display: flex;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .content-tab {
      flex: 1;
      padding: 12px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      position: relative;
    }
    
    .content-tab.active {
      color: var(--primary);
    }
    
    .content-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--primary);
    }
    
    /* 内容区域 */
    .content-container {
      padding-bottom: 20px;
    }
    
    /* 动态卡片 */
    .post-card {
      background-color: var(--bg-white);
      margin-bottom: 10px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .post-content {
      padding: 16px;
    }
    
    .post-text {
      margin-bottom: 15px;
      line-height: 1.6;
    }
    
    .post-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .post-image {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
    }
    
    .post-meta {
      display: flex;
      justify-content: space-between;
      color: var(--text-secondary);
      font-size: 12px;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    .post-action {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
    }
    
    /* 作品展示 */
    .works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    
    .work-item {
      aspect-ratio: 1/1;
      position: relative;
    }
    
    .work-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .work-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.3);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .work-item:hover .work-overlay {
      opacity: 1;
    }
    
    .work-action {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      margin: 0 5px;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--text-secondary);
    }
    
    .empty-icon {
      font-size: 50px;
      margin-bottom: 15px;
      color: var(--border-light);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部封面 -->
  <div class="profile-cover">
    <!-- 封面图将通过CSS设置 -->
  </div>
  
  <!-- 个人信息区 -->
  <div class="profile-header">
    <div class="avatar-container">
      <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="avatar">
      <div class="profile-actions">
        <button class="action-btn btn-follow">
          <i class="fa fa-plus"></i> 关注
        </button>
        <button class="action-btn btn-message">
          <i class="fa fa-comment"></i> 私信
        </button>
        <button class="action-btn btn-more">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="profile-info">
      <div class="username">林小雨</div>
      <div class="user-title">
        自由摄影师 | 旅行爱好者
        <i class="fa fa-check-circle verify-badge"></i>
      </div>
      <div class="user-bio">
        用镜头记录生活中的美好瞬间，分享旅途中的风景与人情。
        合作邮箱：linxiaoyu@example.com
      </div>
      <div class="user-tags">
        <span class="user-tag">摄影</span>
        <span class="user-tag">旅行</span>
        <span class="user-tag">美食</span>
        <span class="user-tag">生活</span>
      </div>
      
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-value">186</div>
          <div class="stat-label">动态</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">12.5k</div>
          <div class="stat-label">粉丝</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">328</div>
          <div class="stat-label">关注</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">46.8k</div>
          <div class="stat-label">获赞</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 内容导航 -->
  <div class="content-tabs">
    <div class="content-tab active">动态</div>
    <div class="content-tab">作品</div>
    <div class="content-tab">收藏</div>
    <div class="content-tab">相册</div>
  </div>
  
  <!-- 内容区域 -->
  <div class="content-container">
    <!-- 动态内容 -->
    <div class="post-card">
      <div class="post-content">
        <div class="post-text">
          今天在郊外发现了一片超美的花海，忍不住拍了好多照片分享给大家～ 春天真是个美好的季节！
        </div>
        <div class="post-images">
          <img src="https://picsum.photos/400/400?random=10" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=11" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=12" alt="动态图片" class="post-image">
        </div>
        <div class="post-meta">
          <span>3天前</span>
          <span>来自 相机</span>
        </div>
      </div>
      <div class="post-actions">
        <div class="post-action">
          <i class="fa fa-heart-o"></i>
          <span>328</span>
        </div>
        <div class="post-action">
          <i class="fa fa-comment-o"></i>
          <span>46</span>
        </div>
        <div class="post-action">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="post-action">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
    
    <div class="post-card">
      <div class="post-content">
        <div class="post-text">
          新入手的相机到了，迫不及待地开箱试拍。分享几张测试照，大家觉得这画质怎么样？
        </div>
        <div class="post-images">
          <img src="https://picsum.photos/400/400?random=13" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=14" alt="动态图片" class="post-image">
        </div>
        <div class="post-meta">
          <span>1周前</span>
          <span>来自 手机</span>
        </div>
      </div>
      <div class="post-actions">
        <div class="post-action">
          <i class="fa fa-heart-o"></i>
          <span>562</span>
        </div>
        <div class="post-action">
          <i class="fa fa-comment-o"></i>
          <span>89</span>
        </div>
        <div class="post-action">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="post-action">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
    
    <div class="post-card">
      <div class="post-content">
        <div class="post-text">
          整理了一下去年的旅行照片，发现走过了这么多地方，每一张都充满了回忆。今年计划去更多地方，有推荐的旅行目的地吗？
        </div>
        <div class="post-images">
          <img src="https://picsum.photos/400/400?random=15" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=16" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=17" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=18" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=19" alt="动态图片" class="post-image">
          <img src="https://picsum.photos/400/400?random=20" alt="动态图片" class="post-image">
        </div>
        <div class="post-meta">
          <span>2周前</span>
          <span>来自 电脑</span>
        </div>
      </div>
      <div class="post-actions">
        <div class="post-action">
          <i class="fa fa-heart-o"></i>
          <span>1254</span>
        </div>
        <div class="post-action">
          <i class="fa fa-comment-o"></i>
          <span>215</span>
        </div>
        <div class="post-action">
          <i class="fa fa-share-alt"></i>
          <span>分享</span>
        </div>
        <div class="post-action">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-plus-circle nav-icon" style="font-size: 1.8rem; margin-top: -0.3rem;"></i>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-envelope-o nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 内容标签切换
    document.querySelectorAll('.content-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有active类
        document.querySelectorAll('.content-tab').forEach(t => {
          t.classList.remove('active');
        });
        // 给当前点击的标签添加active类
        this.classList.add('active');
        
        // 根据点击的标签切换内容
        const tabName = this.textContent;
        const contentContainer = document.querySelector('.content-container');
        
        if (tabName === '动态') {
          // 显示动态内容（默认已显示）
          contentContainer.innerHTML = `
            <!-- 动态内容 -->
            <div class="post-card">
              <div class="post-content">
                <div class="post-text">
                  今天在郊外发现了一片超美的花海，忍不住拍了好多照片分享给大家～ 春天真是个美好的季节！
                </div>
                <div class="post-images">
                  <img src="https://picsum.photos/400/400?random=10" alt="动态图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=11" alt="动态图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=12" alt="动态图片" class="post-image">
                </div>
                <div class="post-meta">
                  <span>3天前</span>
                  <span>来自 相机</span>
                </div>
              </div>
              <div class="post-actions">
                <div class="post-action">
                  <i class="fa fa-heart-o"></i>
                  <span>328</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-comment-o"></i>
                  <span>46</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-share-alt"></i>
                  <span>分享</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-bookmark-o"></i>
                  <span>收藏</span>
                </div>
              </div>
            </div>
            
            <div class="post-card">
              <div class="post-content">
                <div class="post-text">
                  新入手的相机到了，迫不及待地开箱试拍。分享几张测试照，大家觉得这画质怎么样？
                </div>
                <div class="post-images">
                  <img src="https://picsum.photos/400/400?random=13" alt="动态图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=14" alt="动态图片" class="post-image">
                </div>
                <div class="post-meta">
                  <span>1周前</span>
                  <span>来自 手机</span>
                </div>
              </div>
              <div class="post-actions">
                <div class="post-action">
                  <i class="fa fa-heart-o"></i>
                  <span>562</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-comment-o"></i>
                  <span>89</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-share-alt"></i>
                  <span>分享</span>
                </div>
                <div class="post-action">
                  <i class="fa fa-bookmark-o"></i>
                  <span>收藏</span>
                </div>
              </div>
            </div>
          `;
        } else if (tabName === '作品') {
          // 显示作品内容
          contentContainer.innerHTML = `
            <div class="works-grid">
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=21" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 245</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 18</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=22" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 312</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 24</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=23" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 189</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 12</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=24" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 456</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 36</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=25" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 278</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 21</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=26" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 512</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 42</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=27" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 325</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 28</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=28" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 198</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 15</div>
                </div>
              </div>
              <div class="work-item">
                <img src="https://picsum.photos/400/400?random=29" alt="作品图片" class="work-image">
                <div class="work-overlay">
                  <div class="work-action"><i class="fa fa-heart-o"></i> 632</div>
                  <div class="work-action"><i class="fa fa-comment-o"></i> 57</div>
                </div>
              </div>
            </div>
          `;
        } else if (tabName === '收藏') {
          // 显示收藏内容
          contentContainer.innerHTML = `
            <div class="empty-state">
              <i class="fa fa-bookmark-o empty-icon"></i>
              <div>暂无收藏内容</div>
              <div style="font-size: 14px; margin-top: 5px;">收藏感兴趣的内容，在这里集中查看</div>
            </div>
          `;
        } else if (tabName === '相册') {
          // 显示相册内容
          contentContainer.innerHTML = `
            <div class="post-card">
              <div class="post-content" style="padding-bottom: 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                  <div style="font-weight: 600;">旅行随拍</div>
                  <div style="color: var(--text-secondary); font-size: 14px;">24张照片</div>
                </div>
                <div class="post-images">
                  <img src="https://picsum.photos/400/400?random=30" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=31" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=32" alt="相册图片" class="post-image">
                </div>
              </div>
            </div>
            
            <div class="post-card">
              <div class="post-content" style="padding-bottom: 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                  <div style="font-weight: 600;">城市风光</div>
                  <div style="color: var(--text-secondary); font-size: 14px;">18张照片</div>
                </div>
                <div class="post-images">
                  <img src="https://picsum.photos/400/400?random=33" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=34" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=35" alt="相册图片" class="post-image">
                </div>
              </div>
            </div>
            
            <div class="post-card">
              <div class="post-content" style="padding-bottom: 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                  <div style="font-weight: 600;">美食记录</div>
                  <div style="color: var(--text-secondary); font-size: 14px;">32张照片</div>
                </div>
                <div class="post-images">
                  <img src="https://picsum.photos/400/400?random=36" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=37" alt="相册图片" class="post-image">
                  <img src="https://picsum.photos/400/400?random=38" alt="相册图片" class="post-image">
                </div>
              </div>
            </div>
          `;
        }
        
        // 绑定新内容的交互事件
        bindPostActions();
      });
    });
    
    // 关注按钮交互
    document.querySelector('.btn-follow').addEventListener('click', function() {
      if (this.textContent.includes('关注')) {
        this.textContent = '已关注';
        this.classList.remove('btn-follow');
        this.classList.add('btn-secondary');
        this.innerHTML = '<i class="fa fa-check"></i> 已关注';
        alert('关注成功');
      } else {
        this.textContent = '关注';
        this.classList.remove('btn-secondary');
        this.classList.add('btn-follow');
        this.innerHTML = '<i class="fa fa-plus"></i> 关注';
        alert('已取消关注');
      }
    });
    
    // 动态操作交互
    function bindPostActions() {
      document.querySelectorAll('.post-action').forEach(action => {
        action.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const text = this.querySelector('span');
          
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            icon.style.color = '#FF5252';
            text.textContent = parseInt(text.textContent) + 1;
          } else if (icon.classList.contains('fa-heart')) {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            icon.style.color = '';
            text.textContent = parseInt(text.textContent) - 1;
          } else if (icon.classList.contains('fa-bookmark-o')) {
            icon.classList.remove('fa-bookmark-o');
            icon.classList.add('fa-bookmark');
            icon.style.color = var(--primary);
            text.textContent = '已收藏';
          } else if (icon.classList.contains('fa-bookmark')) {
            icon.classList.remove('fa-bookmark');
            icon.classList.add('fa-bookmark-o');
            icon.style.color = '';
            text.textContent = '收藏';
          } else if (icon.classList.contains('fa-share-alt')) {
            alert('分享功能');
          } else if (icon.classList.contains('fa-comment-o')) {
            alert('查看评论');
          }
        });
      });
    }
    
    // 初始化绑定
    bindPostActions();
    
    // 底部导航交互
    document.querySelectorAll('.bottom-nav-item').forEach(item => {
      if (!item.querySelector('.fa-plus-circle')) { // 排除发布按钮
        item.addEventListener('click', function(e) {
          e.preventDefault();
          document.querySelectorAll('.bottom-nav-item').forEach(nav => {
            nav.classList.remove('active');
          });
          this.classList.add('active');
        });
      }
    });
    
    // 发布按钮交互
    document.querySelector('.bottom-nav-item .fa-plus-circle').parentElement.addEventListener('click', function(e) {
      e.preventDefault();
      alert('打开发布内容选项');
    });
  </script>
</body>
</html>
